<!-- 
    动态绑定class
 -->
<script>
    let current = 'foo';
    let big = false;
</script>

<style>
	button {
		display: block;
	}

	.selected {
		background-color: #ff3e00;
		color: white;
	}
    .big {
		font-size: 4em;
	}
</style>

<h1>demo1</h1>
<button
	class="{current === 'foo' ? 'selected' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

<button
	class="{current === 'bar' ? 'selected' : ''}"
	on:click="{() => current = 'bar'}"
>bar</button>

<button
	class="{current === 'baz' ? 'selected' : ''}"
	on:click="{() => current = 'baz'}"
>baz</button>

<h1>demo2</h1>
<label>
	<input type=checkbox bind:checked={big}>
	big
</label>

<div class:big={big}>
	some {big ? 'big' : 'small'} text
</div>
<div class:big>
	some {big ? 'big' : 'small'} text
</div>


